<template>
	<!-- 经典组合详情 -->
	<view class="details1">
		<global-navgation title="经典组合详情"></global-navgation>
		<image :src="lists.cover_img" mode="" class="logo1"></image>
		<view class="title">
			<text class="text1">{{lists.title}}</text>
			<text class="text2">{{lists.sub_title}}</text>
			<view class="line">
				
			</view>
			<text class="text3">{{text}}</text>
		</view>
		<text class="details2">
			—— 图文详情 <text style="margin-left: 1rpx;">——</text>
		</text>
		<!-- <image :src="lists.banner_img" mode="" class="logo2"></image>
		<image :src="lists.cover_img" mode="" class="logo3"></image> -->
		<view class="logo2" v-html="lists.content">
			
		</view>
		<text class="text4">相关资讯</text>
		<view class="text5">
				{{lists.related_article[0]}}
		</view>
		<view class="text6">
			{{lists.related_article[1]}}
		</view>
		<view class="show">
			<button type="default" @click="show">一键分享</button>
		</view>
	</view>
</template>
<script>
	import globalNavgation from '../../components/globalNavgation.vue'
	export default {
		name: 'details1',
		components: {
			globalNavgation
		},
		data() {
			return {
				lists:[],
				text:[],
				related_article:[],
				tokens:""
			}
		},
		onLoad(option) {
			// 解析字符串
			const info = JSON.parse(option.info);
			// console.log(info.title)
			this.lists=info;
			this.text=info.tag.join('-')
			// this.related_article=info.related_article.substring(0,3);
			// console.log(123,info)
		},
		methods:{
			show(){
				uni.navigateTo({
					url:'../show/show'
				})
				
				
			},
		}
	}
</script>
<style scoped>
	.details1{
		margin: 0;
		padding: 0;
		width: 100%;
		position: relative;
	}
	.details1 .show{
		width: 100%;
		position: absolute;
		height: 140rpx;
		left: 0;
		top: 2420rpx;
	box-shadow: 0px -2px 8px rgba(0, 0, 0, 0.08);
	background: #FFFFFF;
	
	}
	.details1 .show button{
		width: 686rpx;
		height: 100rpx;
		background: linear-gradient(90deg, #3965FF 0%, rgba(57, 101, 255, 0.8) 100%);
		border-radius: 8rpx;
		margin-top: 20rpx;
		text-align: center;
		font-family: PingFang SC;
		font-style: normal;
		font-weight: 500;
		font-size: 36rpx;
		line-height: 100rpx;
		color: #FFFFFF;

	}
	.details1 .text5{
		
		height: 40rpx;
		font-family: PingFang SC;
		font-style: normal;
		font-weight: normal;
		font-size: 28rpx;
		line-height: 40rpx;
		text-align: center;
		color: #3965FF;
		position: absolute;
		top: 2238rpx;
		left: 32rpx;
		background: rgba(57, 101, 255, 0.08);
		border-radius: 4px;
	}
	.details1 .text6{
		
		height: 40rpx;
		font-family: PingFang SC;
		font-style: normal;
		font-weight: normal;
		font-size: 28rpx;
		line-height: 40rpx;
		color: #3965FF;
		position: absolute;
		left: 32rpx;
		top: 2314rpx;
		background: rgba(57, 101, 255, 0.08);
		border-radius: 4px;
		
	}
	.details1 .text4{
		position: absolute;
		top: 2174rpx;
		left: 32rpx;
		font-family: PingFang SC;
		font-style: normal;
		font-weight: normal;
		font-size: 32rpx;
	}
	.details1 .logo2{
		width: 686rpx;
		height: 480rpx;
		display: block;
	position: absolute;
	top: 1158rpx;
	left: 32rpx;
	
	}
	.details1 .logo3{
		width: 686rpx;
		height: 480rpx;
		display: block;
	position: absolute;
	top: 1646rpx;
	left: 32rpx;
	
	}
	.details1 .details2{
		display: block;
		width: 208rpx;
		height: 34rpx;
		position: absolute;
		left: 272rpx;
		top: 1100rpx;
		font-family: PingFang SC;
		font-style: normal;
		font-weight: normal;
		font-size: 24rpx;
		line-height: 34rpx;
		color: rgba(0, 0, 0, 0.45);


	}
	.details1 .logo1{
		width: 100%;
		height: 600rpx;
		position: absolute;
		top: 176rpx;
		left: 0;
	}
	.details1 .title{
		width: 100%;
		height: 328rpx;
		position: absolute;
		left: 0;
		top: 740rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 4rpx 16rpx rgba(0, 0, 0, 0.08);
		border-radius: 32rpx 32rpx 0rpx 0rpx;
	}
	.details1 .title .line{
		width: 686rpx;
		height: 2rpx;
		position: absolute;
		left: 32rpx;
		top: 234rpx;
		background: rgba(0, 0, 0, 0.05);
	}
	.details1 .title .text1{
		height: 62rpx;
		font-family: PingFang SC;
		font-style: normal;
		font-weight: 600;
		font-size: 44rpx;
		line-height:62rpx ;
		color: rgba(0, 0, 0, 0.85);
		position: absolute;
		top: 48rpx;
		left: 32rpx;
	}
	.details1 .title .text2{
		display: block;
		width: 686rpx;
		height: 80rpx;
		font-family: PingFang SC;
		font-style: normal;
		font-weight: normal;
		font-size: 28rpx;
		line-height: 40rpx;
		color: rgba(0, 0, 0, 0.45);
		position: absolute;
		top: 122rpx;
		left: 32rpx;
	}
	.details1 .title .text3{
		display: block;
		width: 666rpx;
		height: 34rpx;
		font-family: PingFang SC;
		font-style: normal;
		font-weight: normal;
		font-size: 24rpx;
		line-height: 34rpx;
		text-align: center;
		color: rgba(0, 0, 0, 0.45);
		position: absolute;
		
		top: 260rpx;
	}
</style>